<template>
  <section>

    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-select v-model="selectOptions.query" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-form-item>
          <el-input :placeholder="selectOptions.query" v-model="selectOptions.keywords" @keyup.enter.native="doSearch"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="doSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="background: #13ce66" v-on:click="_reload">刷新</el-button>
        </el-form-item>

        <!--<el-form-item>-->
          <!--<template>-->
            <!--<el-date-picker-->
              <!--v-model="value"-->
              <!--type="date"-->
              <!--placeholder="选择日期" @change="chooseDayPicDate">-->
            <!--</el-date-picker>-->
          <!--</template>-->
        <!--</el-form-item>-->

        <!--<el-form-item>-->
          <!--<template>-->
            <!--<span style="margin-left: 30px">总地数量</span>-->
            <!--<el-button type="primary">{{ all }}</el-button>-->
            <!--<span style="margin-left: 30px">已拍数量</span>-->
            <!--<el-button type="primary">{{ complete }}</el-button>-->
            <!--<span style="margin-left: 30px">未拍数量</span>-->
            <!--<el-button type="primary">{{ noCom }}</el-button>-->
          <!--</template>-->
        <!--</el-form-item>-->

        <!--<el-form-item>-->
          <!--<el-button type="primary" v-on:click="unphotoShow = true">详情</el-button>-->
        <!--</el-form-item>-->

        <div style="display: inline-block;float: right;">
          <el-form-item>
            <el-button type="primary" style="background: #13ce66;width: 120px" v-on:click="manageArea" icon="edit">分配区域</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="photo_data" highlight-current-row v-loading="listLoading"
              style="width: 100%;" element-loading-text="玩命请求中。。。">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="worker_name" label="工作人员姓名" min-width="100">
        <template slot-scope="scope">
          <a href="javascript:void(0)" v-on:click="goWorker(scope.row.id)">{{ scope.row.worker_name }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="工作人员手机号" min-width="100">
      </el-table-column>
      <el-table-column label="工作人员头像" min-width="100">
        <template slot-scope="scope">
          <div class="user-avatar" v-if="scope.row.pic">
            <a :href="scope.row.pic" target="_blank"> <img :src="scope.row.pic" alt=""></a>
          </div>
          <div class="user-avatar" v-else>
            <img src="../../../static/images/default.png" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="area_name" label="区块名" min-width="100" >
      </el-table-column>
      <el-table-column prop="name" label="菜地名" min-width="100" >
      </el-table-column>
      <el-table-column label="图片信息" min-width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.content.pics" style="margin-top: 5px">
            <a :href="item" v-for="(item, index) in scope.row.content.pics" target="_blank">
              <img :src="item" alt="" :key="index" style="width: 60px;height: 60px;">
            </a>
          </div>
          <span v-else>暂未上传每日一拍</span>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="拍照时间" width="180">
      </el-table-column>
    </el-table>

    <!--分配分管区域界面-->
    <el-dialog title="分管区域" v-model="manageAreaList" :close-on-click-modal="false">
      <el-form label-width="80px" ref="editForm">
        <div v-for="(area, index) in workerAreaList" :id="activeClass(area.id)">
          <div style="margin: 10px 0;">{{ area['name'] }}</div>
          <el-checkbox-group v-model="area.area_name">
            <el-checkbox-button v-for="(area_name, index) in areaNames" :label="area_name" :key="index" style="margin-top: 5px;" ref="checkPurbox">{{ area_name }}</el-checkbox-button>
          </el-checkbox-group>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="manageAreaList = false">取消</el-button>
        <el-button type="success" @click.native="submitMangeArea" :loading="listLoading">确认修改</el-button>
      </div>
    </el-dialog>

    <!--未拍照地块界面-->
    <el-dialog title="未拍地块信息" v-model="unphotoShow" :close-on-click-modal="false">
      <el-table :data="unphoto" style="width: 100%;">
        <el-table-column prop="area_name" label="区块名" min-width="100"></el-table-column>
        <el-table-column prop="name" label="地块名" min-width="100"></el-table-column>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="unphotoShow = false">取消</el-button>
        </div>
      </el-table>
    </el-dialog>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @current-change="currentPageChange"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :total="total" style="float:right;" :current-page="parseInt(selectOptions.page)">
      </el-pagination>
      <span style="float: right;margin-top: 6px;margin-right: 5px;">共 {{total}} 条数据</span>
    </el-col>

  </section>
</template>

<script type="text/ecmascript-6">
  import util from '../../util'
  import NProgress from 'nprogress'
	import { apiTree } from '../../apiTree'
	
  export default {
    data() {
      return {
        unphotoShow: false,
        unphoto: [], // 未拍照列表
        complete: 0, // 拍照总是
        all: 0, // 土地总数
        noCom: 0, // 未拍照总数
        options: [
          {value: 'uid', label: '工作人员uid'},
          {value: 'phone', label: '手机号'},
          {value: 'nickname', label: '昵称'},
          {value: 'name', label: '姓名'},
          {value: 'area_name', label: '区域名'}
        ],
        value: '',
        photo_data: [],
        total: 0,
        areaNames: [],
        listLoading: false,
        manageAreaList: false,
        workerAreaList: [],
        _workerOldAreaList: [],
        selectOptions: {
          page: this.$route.query.page !== undefined ? this.$route.query.page : 1,
          query: this.$route.query.query !== undefined ? this.$route.query.query : '',
          keywords: this.$route.query.keywords !== undefined ? this.$route.query.keywords : ''
        }
      }
    },
    methods: {
      activeClass(value) {
        return 'active' + value;
      },
      // 改变当前状态
      currentStatusChange() {
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      currentPageChange(val) {
        this.selectOptions.page = val
        this.$router.push({path: this.$route.path, query: this.selectOptions})
      },
      doSearch() {
        if (this.selectOptions.query) {
          this.$router.push({path: this.$route.path, query: this.selectOptions})
        }
      },
      goWorker(id) {
        this.$router.push('/worker/index?query=id&keywords=' + id)
      },
      // 刷新
      _reload() {
        this.getDayPhotos()
      },
      // 分配管理区域
      manageArea() {
        this.manageAreaList = true;
        NProgress.start();
        apiTree('dayphoto/index', 'map/getWorkerManageArea', {}).then((res) => {
          this.areaNames = res.d.map_name;
          this.workerAreaList = res.d.data;
          this._workerOldAreaList = util.cloneObj(this.workerAreaList);
          NProgress.done();
        })
      },
      submitMangeArea() {
        let update_data = [];
        let temp_data = [];
        let sameAreaName = [];
        let sameStr = '';
        // 新增数据
        for (let i in this.workerAreaList) {
          this.workerAreaList[i]['area_name'].forEach((item) => {
            if (this._workerOldAreaList[i]['area_name'].indexOf(item) < 0) {
              update_data.push({'id': i, 'type': 3, 'area_name': item});
            }
            temp_data.push({'name': this.workerAreaList[i]['name'], 'area_name': item});
          });
        }
        for (let i = temp_data.length-1; i >= 0; i--)
        {
          let targetNode = temp_data[i];
          for (let j = 0; j < i; j++)
          {
            if (targetNode['area_name'] === temp_data[j]['area_name']) {
              sameAreaName.push(targetNode['area_name']);
            }
          }
        }
        sameAreaName = util.uniqueArr(sameAreaName);
        sameAreaName.forEach((item) => {
          sameStr += item + '、';
        })
        if (!util.isEmpty(sameStr)) {
          this.$notify({
            title: '警告',
            message: sameStr + '相同',
            type: 'warning'
          });
          return;
        }
        // 删除的数据
        for (let i in this._workerOldAreaList) {
          this._workerOldAreaList[i]['area_name'].forEach((item) => {
            if (this.workerAreaList[i]['area_name'].indexOf(item) < 0) {
              update_data.push({'id': i, 'type': 4, 'area_name': item});
            }
          });
        }
        if (util.isEmpty(update_data)) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.manageAreaList = false
          return
        }
        let para = {'data': update_data};
        apiTree('dayphoto/index', 'map/setWorkerManageArea', para, 'POST').then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.manageAreaList = false
          }
        })
      },
      // 选择日期判断每日一拍的数量
      chooseDayPicDate() {
        let para = {};
        if (this.value) {
          para = {'datetime': Math.ceil(new Date(this.value).getTime() / 1000)}
        }
        NProgress.start();
        apiTree('dayphoto/index', 'map/unPhoto', para).then((res) => {
          this.complete = res.d.completed;
          this.all = res.d.all;
          this.noCom = res.d.noCom;
          this.unphoto = res.d.unPhoto
          this.listLoading = false
          NProgress.done();
        })
      },
      // 获取每日一拍列表
      getDayPhotos() {
        let para = this.$route.query

        if (this.value) {
          this.$route.query.datetime = this.showDate
        }
        if (util.isEmptyObject(para)) {
          this.selectOptions = {
            page: 1,
            query: '',
            keywords: ''
          }
        }
        this.listLoading = true
        NProgress.start()
        apiTree('dayphoto/index', 'map/dayphoto', para).then((res) => {
          this.photo_data = res.d.data
          this.total = res.d.total_num
          this.complete = res.d.completed
          this.all = res.d.all
          this.noCom = res.d.noCom
          this.listLoading = false
          NProgress.done()
        })
      }
    },
    created() {
      this.getDayPhotos();
//      this.chooseDayPicDate();
    },
    watch: {
      $route: 'getDayPhotos'
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .user-avatar
    width 60px
    height 60px
    border-radius 50%
    & img
      width 100%
      height 100%
      border-radius 50%
  .cell {
    overflow: hidden;
  }
  .name {
    display: block;
    padding-top: 10px;
  }
  .people {
    float: right;
  }
  .user-avatar {
    float: left;
  }
</style>
